import React from 'react'
import { Table, Icon, Popconfirm, Button } from 'antd'
import { Link } from 'react-router'

export default class myTable extends React.Component{
	constructor(props){
		super(props)
		this.state={
			data:[],
			showEleImg:false,
            imgSrc:''
		}
	}
	componentDidMount() {
        const data = [
			{ key: 1, name: 'java课前聊天室', url:'http://demo.91zmt.com/caizr/tts/client/index.html#/chartDetail?id=7', code: './src/assets/images/code.png'},
			{ key: 2, name: 'vue课前聊天室', url:'http://demo.91zmt.com/caizr/tts/client/index.html#/chartDetail?id=7', code: './src/assets/images/code.png'},
			{ key: 3, name: 'react课前聊天室', url:'http://demo.91zmt.com/caizr/tts/client/index.html#/chartDetail?id=7', code: './src/assets/images/code.png'},
			{ key: 4, name: 'javascript课前聊天室', url:'http://demo.91zmt.com/caizr/tts/client/index.html#/chartDetail?id=7', code: './src/assets/images/code.png'},
			{ key: 5, name: 'javascript课前调查', url:'http://demo.91zmt.com/caizr/tts/question.html?id=14&&name=javascript', code: './src/assets/images/code2.png'},
			{ key: 6, name: 'javascript课后评估', url:'http://demo.91zmt.com/caizr/tts/question.html?id=16&&name=java', code: './src/assets/images/code3.png'},
		]
        // for (let i = 0; i < 5; i++) {
        //     data.push({
        //         key: i,
        //         type: i%2==0?`课前${i}`:`课后${i}`,
        //         url: `http://baidu.com${i}`,
        //         code: './src/assets/images/code.png'
        //         })
        // }
        this.setState({data})
    }
	//提交表单
	handleSelectChange = (value) => {
        console.log(`selected ${value}`)
    }
	showImg (src) {
		this.setState({
			showEleImg:true,
			imgSrc:src
		})
	}
	closeImg () {
		this.setState({ showEleImg:false})
	}
    onDelete = (index) => {
     	
	    const data = [...this.state.data];
	    data.splice(index, 1);
	    this.setState({ data });
	  	}
	 render() {
		const { showEleImg, imgSrc } = this.state; 
        const columns=[{
			title:'墙名称',
			dataIndex:'name',
			width:'10%',
		},{
			title:'墙url',
			dataIndex:'url',
			width:'50%',
			render:(url, record, index)=>{
				return(<a href={url} >{url}</a>)
			}
		},{
			title:'墙二维码',
			dataIndex:'code',
			width:'10%',
			render:(src, record, index)=>{
				return(
				<div className="eleLitleImg"><img id={'code'+index}  src={src} onClick={()=>{this.showImg(src)}} /></div>)
			}
		},{
			title:'操作',
			dataIndex:'operation',
			width:'30%',
			render: (text, record, index) => {
	        
	        return (	            
	             <span>
	              <Popconfirm title="确定删除?" onConfirm={() => this.onDelete(index)}>
	                <Button>删除</Button>
	              </Popconfirm>&nbsp;
	            </span>
	          )   
	      }}
		],dataSource=this.state.data;
        const pagination = {
            total: dataSource.length,
            showSizeChanger: true,
            onShowSizeChange(current, pageSize) {
                console.log('Current: ', current, '; PageSize: ', pageSize)
            },
            onChange(current) {
                console.log('Current: ', current)
            }
        }

        return (
			<div>
				<div id="showImgBig" className={showEleImg?"showEleImg active":"showEleImg"}>
                <Icon type="cross-circle-o" onClick={this.closeImg.bind(this)} />
                <img src={imgSrc}  alt ="证书图片"/>
                </div>
            	<Table columns={columns} dataSource={dataSource} bordered pagination={pagination} className="animated fadeInUp " />
			</div>
        )
    }
}
